/**
 * 移动端菜单脚本
 * 处理移动设备上的菜单显示和交互
 */

document.addEventListener('DOMContentLoaded', function() {
    // 检查是否需要创建移动菜单按钮
    if (window.innerWidth <= 768 && !document.querySelector('.mobile-menu-btn')) {
        createMobileMenuElements();
    }
    
    // 窗口大小变化时检查是否需要创建移动菜单
    window.addEventListener('resize', function() {
        if (window.innerWidth <= 768 && !document.querySelector('.mobile-menu-btn')) {
            createMobileMenuElements();
        }
    });
    
    // 创建移动菜单元素
    function createMobileMenuElements() {
        // 创建移动菜单按钮
        const mobileMenuBtn = document.createElement('div');
        mobileMenuBtn.className = 'mobile-menu-btn';
        mobileMenuBtn.innerHTML = '<i class="fas fa-bars"></i>';
        document.body.appendChild(mobileMenuBtn);
        
        // 创建遮罩层
        const mobileMenuOverlay = document.createElement('div');
        mobileMenuOverlay.className = 'mobile-menu-overlay';
        document.body.appendChild(mobileMenuOverlay);
        
        // 添加事件监听
        mobileMenuBtn.addEventListener('click', function() {
            const sidebar = document.querySelector('.sidebar');
            if (sidebar) {
                sidebar.classList.toggle('mobile-active');
                mobileMenuOverlay.classList.toggle('active');
            }
        });
        
        mobileMenuOverlay.addEventListener('click', function() {
            const sidebar = document.querySelector('.sidebar');
            if (sidebar) {
                sidebar.classList.remove('mobile-active');
                this.classList.remove('active');
            }
        });
    }
    
    // 处理移动端导航项点击
    const navItems = document.querySelectorAll('.sidebar .nav-item');
    navItems.forEach(item => {
        item.addEventListener('click', function() {
            if (window.innerWidth <= 768) {
                const sidebar = document.querySelector('.sidebar');
                const overlay = document.querySelector('.mobile-menu-overlay');
                
                if (sidebar && overlay) {
                    // 给导航项点击后关闭菜单的操作添加延迟，以便用户看到点击效果
                    setTimeout(() => {
                        sidebar.classList.remove('mobile-active');
                        overlay.classList.remove('active');
                    }, 300);
                }
            }
        });
    });
}); 